import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/services.dart';
import 'package:gzmall_app/common/color_common.dart';
import 'package:gzmall_app/common/fwebView_scaffold.dart';
import 'package:gzmall_app/common/net_util.dart';
import 'package:gzmall_app/common/api.dart';
import 'package:gzmall_app/common/setting_util.dart';
import 'package:gzmall_app/common/toast_util.dart';
import 'package:gzmall_app/model/setting.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class RegisterPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return RegisterPageState();
  }
}

class RegisterPageState extends State<RegisterPage> {
  SystemUiOverlayStyle _style = SystemUiOverlayStyle.dark;
  bool _isCheckAgreement = false;
  String _phone, _verifyCode, _password;
  bool _isSendVerify = false;
  List<Setting> _settings = [];
  TextEditingController _accountController, _pwdController, _codeController;

  @override
  void initState() {
    super.initState();
    _accountController = TextEditingController();
    _pwdController = TextEditingController();
    _codeController = TextEditingController();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(_style);
    return new Scaffold(
      body: ListView(
        children: <Widget>[
          Column(
            children: <Widget>[
              Stack(
                alignment: const FractionalOffset(0.0, 0.5),
                children: <Widget>[
                  Container(
                    alignment: Alignment.center,
                    width: double.infinity,
                    height: 56.0,
                    child: Text(
                      "注册",
                      textAlign: TextAlign.center,
                      style: new TextStyle(
                          fontSize: 20.0, color: ColorCommon.black1),
                    ),
                  ),
                  InkWell(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 15.0),
                      child: Icon(Icons.close),
                    ),
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Padding(
                    padding: const EdgeInsets.only(
                        left: 50.0, right: 50.0, top: 50.0),
                    child: new Row(
                      children: <Widget>[
                        new Expanded(
                          child: new Text("国家",
                              style: new TextStyle(
                                  fontSize: 16.0, color: ColorCommon.black1)),
                        ),
                        new Text("+86",
                            style: new TextStyle(
                                fontSize: 16.0, color: ColorCommon.black1)),
                        new Padding(
                          padding: const EdgeInsets.only(left: 10.0),
                          child: new Image.asset("images/right_arrow.png",
                              width: 10.0, height: 10.0),
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    height: 54.0,
                    padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                    margin: const EdgeInsets.only(
                        left: 30.0, right: 30.0, top: 30.0, bottom: 20.0),
                    alignment: Alignment.center,
                    decoration: new BoxDecoration(
                        color: ColorCommon.grey2,
                        borderRadius: new BorderRadius.circular(100.0)),
                    child: new Row(
                      children: <Widget>[
                        new Padding(
                          padding: const EdgeInsets.only(right: 10.0),
                          child: Image.asset(
                            "images/mobile.png",
                            width: 20.0,
                            height: 20.0,
                          ),
                        ),
                        new Expanded(
                          child: new TextField(
                            controller: _accountController,
                            style: new TextStyle(color: ColorCommon.black1),
                            decoration: new InputDecoration.collapsed(
                              hintText: "+86 请输入手机号",
                              hintStyle: TextStyle(
                                  fontSize: 12.0, color: ColorCommon.grey1),
                            ),
                            onChanged: (str) {
                              _phone = str ?? '';
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    height: 54.0,
                    padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                    margin: const EdgeInsets.only(
                        left: 30.0, right: 30.0, bottom: 20.0),
                    alignment: Alignment.center,
                    decoration: new BoxDecoration(
                        color: ColorCommon.grey2,
                        borderRadius: new BorderRadius.circular(100.0)),
                    child: new Row(
                      children: <Widget>[
                        new Padding(
                          padding: const EdgeInsets.only(right: 10.0),
                          child: Image.asset(
                            "images/pwd.png",
                            width: 20.0,
                            height: 20.0,
                          ),
                        ),
                        new Expanded(
                          child: new TextField(
                            obscureText: true,
                            controller: _pwdController,
                            style: new TextStyle(color: ColorCommon.black1),
                            decoration: new InputDecoration.collapsed(
                              hintText: "密码",
                              hintStyle: TextStyle(
                                  fontSize: 12.0, color: ColorCommon.grey1),
                            ),
                            onChanged: (str) {
                              _password = str ?? '';
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                  new Container(
                    height: 54.0,
                    padding: const EdgeInsets.only(left: 20.0, right: 20.0),
                    margin: const EdgeInsets.only(left: 30.0, right: 30.0),
                    alignment: Alignment.center,
                    decoration: new BoxDecoration(
                        color: ColorCommon.grey2,
                        borderRadius: new BorderRadius.circular(100.0)),
                    child: new Row(
                      children: <Widget>[
                        new Padding(
                          padding: const EdgeInsets.only(right: 10.0),
                          child: Image.asset(
                            "images/vierfy_code.png",
                            width: 20.0,
                            height: 20.0,
                          ),
                        ),
                        new Expanded(
                          child: new TextField(
                            controller: _codeController,
                            style: new TextStyle(color: ColorCommon.black1),
                            decoration: new InputDecoration.collapsed(
                              hintText: "验证码",
                              hintStyle: TextStyle(
                                  fontSize: 12.0, color: ColorCommon.grey1),
                            ),
                            onChanged: (str) {
                              _verifyCode = str ?? '';
                            },
                          ),
                        ),
                        new GestureDetector(
                          child: new Text(
                            !_isSendVerify ? "发送验证码" : "验证码已发送",
                            textAlign: TextAlign.right,
                            style: new TextStyle(
                                color: !_isSendVerify
                                    ? ColorCommon.primaryColor
                                    : ColorCommon.grey1),
                          ),
                          onTap: () {
                            if (_phone != null && !_isSendVerify) {
                              _getVerifyCode(_phone);
                            }
                          },
                        ),
                      ],
                    ),
                  ),
                  new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      new Checkbox(
                        value: _isCheckAgreement,
                        onChanged: (isCheck) {
                          if (!mounted) return;
                          setState(() {
                            _isCheckAgreement = isCheck;
                          });
                        },
                      ),
                      new Text(
                        "我已阅读并同意\"",
                        style:
                            TextStyle(fontSize: 12.0, color: ColorCommon.grey1),
                      ),
                      InkWell(
                        onTap: () {
                          // Navigator.of(context)
                          //     .push(new MaterialPageRoute(builder: (_) {
                          //   return FWebviewScaffold(
                          //     url: SettingUtil.termOfServiceUrl,
                          //     userAgent: Api.kWebViewUserAgent,
                          //     enableMessaging: true,
                          //     withJavascript: true,
                          //     clearCache: true,
                          //     appBar: AppBar(
                          //       title: Text("服务协议"),
                          //     ),
                          //   );
                          // }));

                          String html = Uri.dataFromString(Api.userAgreement,
                              mimeType: 'text/html',
                              parameters: {'charset': 'utf-8'}).toString();
                          Navigator.of(context)
                              .push(new MaterialPageRoute(builder: (_) {
                            return FWebviewScaffold(
                              url: html,
                              userAgent: Api.kWebViewUserAgent,
                              enableMessaging: true,
                              withJavascript: true,
                              clearCache: true,
                              appBar: AppBar(
                                title: Text("用户协议"),
                              ),
                            );
                          }));
                        },
                        child: Text(
                          "用户服务使用协议",
                          style: TextStyle(
                              fontSize: 12.0, color: ColorCommon.primaryColor),
                        ),
                      ),
                      new Text(
                        "\"",
                        style:
                            TextStyle(fontSize: 12.0, color: ColorCommon.grey1),
                      ),
                    ],
                  ),
                ],
              ),
              new GestureDetector(
                onTap: () {
                  _registerAction();
                },
                child: new Container(
                  height: 54.0,
                  margin: const EdgeInsets.fromLTRB(30.0, 50.0, 30.0, 50.0),
                  alignment: Alignment.center,
                  decoration: new BoxDecoration(
                      color: ColorCommon.primaryColor,
                      borderRadius: new BorderRadius.circular(100.0)),
                  child: new Text(
                    "立即进入",
                    style: new TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  _registerAction() {
    if (_phone == null || _phone.isEmpty) {
      ToastUtil.showMessageToast("请输入电话号码");
      return;
    }
    if (_password == null || _password.isEmpty) {
      ToastUtil.showMessageToast("请输入密码");
      return;
    }
    if (_verifyCode == null || _verifyCode.isEmpty) {
      ToastUtil.showMessageToast("请输入验证码");
      return;
    }
    if (!_isCheckAgreement) {
      ToastUtil.showMessageToast("请阅读 用户服务使用协议");
      return;
    }
    _register(_phone, _password, _password, _verifyCode);
  }

  _getVerifyCode(String phone) {
    Map<String, String> params = {
      "phone": phone,
      "type": "register",
    };

    NetUtil.post(context, Api.identifyCodes, (data, message) {
      _isSendVerify = true;
      ToastUtil.showMessageToast(message);
    }, params: params, isShowLoading: true);
  }

  _register(
      String phone, String password, String confirmPassword, String code) {
    Map<String, String> params = {
      "phone": phone,
      "password": password,
      "confirm_password": confirmPassword,
      "code": code
    };

    NetUtil.post(context, Api.userRegister, (data, message) {
      ToastUtil.showMessageToast(message);
      Navigator.of(context).pop();
    }, params: params, isShowLoading: true);
  }
}
